<template>
  <div class="holy-grail">
    <!-- 头部区域 -->
    <header class="hg-header">
      <div class="header-content">
        <div class="brand">圣杯布局系统</div>
        <nav class="nav">
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">关于</a></li>
          </ul>
        </nav>
        <div class="user-actions">
          <button class="notification-btn">
            <span class="icon">🔔</span>
            <span class="badge">3</span>
          </button>
          <div class="user-avatar">A</div>
        </div>
      </div>
    </header>

    <!-- 内容容器 -->
    <div class="hg-container">
      <!-- 左侧边栏 -->
      <aside class="hg-left">
        <div class="sidebar-section">
          <h3>导航菜单</h3>
          <ul>
            <li v-for="item in 5" :key="'nav-'+item">
              <span class="icon">📌</span> 菜单项 {{item}}
            </li>
          </ul>
        </div>
        <div class="sidebar-section">
          <h3>快捷操作</h3>
          <button v-for="btn in 3" :key="'btn-'+btn" class="quick-action">
            操作 {{btn}}
          </button>
        </div>
      </aside>

      <!-- 中间主内容区 -->
      <main class="hg-main">
        <div class="content-header">
          <h2>欢迎使用圣杯布局</h2>
          <p>这是一个使用Vue实现的经典圣杯布局，中间内容区域自适应宽度，两侧边栏固定宽度。</p>
        </div>

        <div class="content-grid">
          <div v-for="n in 6" :key="'card-'+n" class="content-card">
            <div class="card-header">卡片 {{n}}</div>
            <div class="card-body">
              <p>这是卡片 #{{n}}的内容，展示了圣杯布局中间区域的灵活性。</p>
              <button>查看详情</button>
            </div>
          </div>
        </div>
      </main>

      <!-- 右侧边栏 -->
      <aside class="hg-right">
        <div class="sidebar-section">
          <h3>通知中心</h3>
          <div class="notification" v-for="n in 3" :key="'notify-'+n">
            <p>系统通知 #{{n}}: 圣杯布局已优化</p>
            <span class="time">今天</span>
          </div>
        </div>
        <div class="sidebar-section">
          <h3>资源使用</h3>
          <div class="progress">
            <div class="progress-bar" :style="{width: '65%'}"></div>
          </div>
          <div class="progress-labels">
            <span>0%</span>
            <span>65%</span>
            <span>100%</span>
          </div>
        </div>
      </aside>
    </div>

    <!-- 底部区域 -->
    <footer class="hg-footer">
      <p>© 2025 圣杯布局演示系统 | Vue组件实现</p>
      <p>采用现代化CSS布局技术和Vue.js组件系统构建</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'HolyGrailLayout',
  data() {
    return {
      // 可以在这里定义数据
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  color: #333;
  background: #f8f9fa;
}

/* 头部样式 */
.hg-header {
  background: linear-gradient(45deg, #8e2de2, #4a00e0);
  color: white;
  padding: 15px 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.brand {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.nav ul {
  display: flex;
  list-style: none;
}

.nav li {
  margin: 0 15px;
}

.nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background 0.3s;
}

.nav a:hover {
  background: rgba(255, 255, 255, 0.15);
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.notification-btn {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  position: relative;
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff4d4d;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar {
  width: 36px;
  height: 36px;
  background: #6a11cb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 2px solid rgba(255,255,255,0.3);
}

/* 内容容器样式 */
.hg-container {
  display: flex;
  flex: 1;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* 主内容区样式 */
.hg-main {
  flex: 1;
  order: 2;
  padding: 0 20px;
  min-width: 0; /* 防止内容溢出 */
}

.content-header {
  margin-bottom: 25px;
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #eaeaea;
}

.content-header h2 {
  color: #4a00e0;
  margin-bottom: 10px;
}

.content-header p {
  color: #666;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.content-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.content-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.card-header {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  padding: 15px;
  font-weight: bold;
}

.card-body {
  padding: 20px;
}

.card-body p {
  margin-bottom: 15px;
  color: #555;
}

.card-body button {
  background: #42b983;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s;
}

.card-body button:hover {
  background: #369f6d;
}

/* 侧边栏样式 */
.hg-left, .hg-right {
  width: 250px;
  padding: 0 15px;
}

.hg-left {
  order: 1;
}

.hg-right {
  order: 3;
}

.sidebar-section {
  background: white;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.sidebar-section h3 {
  color: #4a00e0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.sidebar-section ul {
  list-style: none;
}

.sidebar-section li {
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
}

.sidebar-section li:last-child {
  border-bottom: none;
}

.icon {
  margin-right: 10px;
}

.quick-action {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  background: #f0f0f0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

.quick-action:hover {
  background: #e0e0e0;
}

.notification {
  background: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  position: relative;
}

.notification p {
  color: #333;
  margin-bottom: 5px;
}

.time {
  font-size: 0.8rem;
  color: #999;
}

.progress {
  height: 10px;
  background: #e9ecef;
  border-radius: 5px;
  margin: 10px 0;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #8e2de2, #4a00e0);
  border-radius: 5px;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #6c757d;
}

/* 底部样式 */
.hg-footer {
  background: linear-gradient(45deg, #232526, #414345);
  color: white;
  text-align: center;
  padding: 25px;
}

.hg-footer p {
  margin: 5px 0;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
}

/* 响应式处理 */
@media (max-width: 992px) {
  .hg-container {
    flex-wrap: wrap;
  }

  .hg-left, .hg-right {
    width: 100%;
    padding: 0 20px 20px;
    order: 3;
  }

  .hg-main {
    padding: 0 20px 20px;
    width: 100%;
  }

  .header-content {
    flex-direction: column;
    gap: 15px;
  }

  .nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav li {
    margin: 5px 10px;
  }
}

@media (max-width: 768px) {
  .hg-container {
    display: block;
  }

  .hg-left, .hg-right {
    margin-bottom: 20px;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }
}
</style>